---
title: Getting Started
description: Build your first simple PDF viewer with EmbedPDF and Vue in just a few steps.
---

# Getting Started

Let's build a basic, scrollable PDF viewer in Vue. This guide will walk you through the essential setup.

## 1. Installation

You'll need a few packages to create a minimal viewer: the core library, the engine, and a few essential plugins.

```sh npm2yarn
npm install @embedpdf/core @embedpdf/engines @embedpdf/plugin-loader @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render
````

## 2. Create Your Viewer Component

The core of your viewer will be the `<EmbedPDF>` component, which manages the engine and plugins. This example uses Vue 3's `<script setup>` syntax.

```vue copy filename="PDFViewer.vue"
<script setup lang="ts">
import { usePdfiumEngine } from '@embedpdf/engines/vue';
import { EmbedPDF } from '@embedpdf/core/vue';
import { createPluginRegistration } from '@embedpdf/core';

// Import the essential plugins and their components
import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/vue';
import { Scroller, ScrollPluginPackage } from '@embedpdf/plugin-scroll/vue';
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/vue';
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/vue';

// 1. Initialize the engine with the Vue composable
const { engine, isLoading } = usePdfiumEngine();

// 2. Register the plugins you need
const plugins = [
  createPluginRegistration(LoaderPluginPackage, {
    loadingOptions: {
      type: 'url',
      pdfFile: {
        id: 'example-pdf',
        url: 'https://snippet.embedpdf.com/ebook.pdf',
      },
    },
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
];
</script>

<template>
  <div style="height: 500px; border: 1px solid black;">
    <div v-if="isLoading || !engine" class="loading-pane">
      Loading PDF Engine...
    </div>
    
    <EmbedPDF v-else :engine="engine" :plugins="plugins">
      <Viewport class="viewport-class">
        <Scroller>
          <template #default="{ page }">
            <div
              :style="{
                width: `${page.width}px`,
                height: `${page.height}px`,
              }"
            >
              <RenderLayer :pageIndex="page.pageIndex" />
            </div>
          </template>
        </Scroller>
      </Viewport>
    </EmbedPDF>
  </div>
</template>

<style scoped>
.loading-pane {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.viewport-class {
  background-color: #f1f3f5;
}
</style>
```

## 3\. Render Your Component

Finally, import and use your new `<PDFViewer />` component in your main application file.

```vue filename="App.vue"
<script setup lang="ts">
import PDFViewer from './PDFViewer.vue';
</script>

<template>
  <PDFViewer />
</template>
```

You now have a functional PDF viewer!

## Next Steps

  - Discover how to add more features by **[Understanding Plugins](./understanding-plugins.md)**.
